<template>
  <div> 
    <div class="header">
        <div class="header-top">我就看谁敢旷课？</div>
    </div>
    <div class="photo">
      <el-image class="photo-size" :src="'data:image/*;base64,'+img_src" fit=contain></el-image>
    </div>
    <div class="num-face">
      本堂课缺勤名单
    </div>
      <div v-if="absentlist.length!=0">
        <div class="key-box">
            <div class="st-num ">学号</div>
            <div class="st-name">姓名</div>
            <div class="st-phone">联系方式</div>  
        </div>
        <div class="absent-box" ref="wrapper"> 
            <ul class="st-list" v-for="item in absentlist" :key="item.num"> 
                <li class="st-num">{{item.num}}</li>
                <li class="st-name">{{item.name}}</li>
                <li class="st-phone ">{{item.sphone}}</li>  
            </ul>
        </div>
      </div>
      <div class="absent-box" v-else>
        没有人缺勤
      </div>
    <div class="bt-camera">
      <div class="back"  @click='backToHome'>
        <i class="iconfont icon-back">&#xe60a;</i>
        <div class="text-back">返回</div>
        </div>
      <div class="confirm">
        <div class="text-confirm"  @touchend='saveAbsent'>保存</div>
        <i class="iconfont icon-fin">&#xe637;</i>
      </div>
    </div>
      
  </div>
  
</template>

<script>
import BScroll from 'better-scroll'
import axios from 'axios'
import {mapState} from 'vuex'

export default {
  name: 'Camera',
  data() {
    return {
      img_src:'',
      absentlist:[],
      check:true
    }
  },
    computed:{
      ...mapState(['username']),
    
    },
  methods:{
      backToHome(){
        this.$router.push('/home')
      },
      saveAbsent(){
        let dict = {}
        dict['username'] = this.username 
        dict['absentlist'] = this.absentlist
        axios({
           method:'post',
           url:'/api/user/saveAbsent',
           data:dict,
         }).then((res)=>{
           if(res.data == "savesucc"){
             this.$message({
          message: '已保存结果！',
          type: 'success',
          duration:1500,
        });
           this.$router.push('/home')
           }
           else{
              this.$message.error('出错了！请重试...');
           }
         }).catch((err)=>{
           return err
         })
      } 
    },
  mounted(){
  setTimeout(()=>{
    this.scroll = new BScroll(this.$refs.wrapper,{click:true})
    },100)     
  },
  created(){
    let self = this
    this.$bus.$on('eventBus',(value) => {
      self.img_src = value.img   
      self.absentlist = value.absent
    })
  
    },
  beforeDestroy(){
    this.$bus.$off('eventBus')
  }
          
  }
</script>

<style scoped>
  .key-box{
        height: .48rem;
        line-height: .48rem;
        background:#aaa;
        text-align: center;
        font-size: .32rem;
        color: black;
        
  }
  .st-num{
        float: left;
        width: 32%;
        border-right: 1px solid #eee;
    }
  .st-name{
        float: left;
        width: 33%;
        border-right: 1px solid #eee;
    }
  .st-phone{
        float: left;
        width: 34%;
    }
  .st-list{
        height: .635rem;
        line-height: .635rem;
        background:rgba(218, 204, 179, 0.267);
        text-align: center;
        font-size: .32rem;
        color: black;
        border-bottom: 1px solid rgb(79, 176, 221);
    }
  .absent-box{
        line-height: 2rem;
        text-align: center;
        font-size: .38rem;
        color: rgb(102, 137, 233);
        overflow: scroll;
        height: 3rem;
        background:rgb(241, 241, 241);
    }
  .icon-back{
    position: relative;
    left: .1rem;
    top: .06rem;
    height: .94rem;
    line-height: .94rem;
    float: left;
    font-size: .32rem;
  }
 
  .header{
    height: .86rem;
    background :rgb(100, 124, 204);
    color:#ffff;
    text-align: center
  }
  .icon-back{
    float: left;
    position: absolute;
    width: .64rem;
    height: .64rem;
    line-height: .64rem;
    font-size: .4rem;
    margin-top: .08rem;
    
  }
  .icon-fin{
    position: relative;
    float: right;
    right: .04rem;
    height: .94rem;
    line-height: .94rem;
    font-size: .48rem;
    margin-top: .02rem;
   
  }
  .header-top{
   font-size: .36rem;
   line-height: .86rem;
  }
  .photo{
    overflow: hidden;
    height: 100%;
    width: 100%;
    
  }/*  56.2% */
  .photo-size{
    overflow: hidden;
    width: 100%;
    
  }
  .num-face{
    height: .54rem;
    line-height: .54rem;
    text-align: center;
    font-size: .32rem;
    color: #4b58ce;
    background: #eee;
    border: 1px solid  rgb(220, 245, 0)
    
  }
  .bt-camera{
    overflow: hidden;
    width: 100%;
    height: 1.9rem;
    background:linear-gradient( rgb(234, 235, 236),  rgb(131, 160, 199));

  }
  .back{
    position: relative;
    top: .48rem;
    left: .8rem;
    float: left;
    width: 28%;
    height: .94rem;
    line-height: .94rem;
    text-align: center;
    border-radius: .32rem;
    color: aliceblue;
    font-size: .36rem;
    letter-spacing: .1rem;
    background:#888;
    box-shadow: 0px 1px 3px rgba(2, 2, 2, 0.3);
  }
  .text-back{
    position: relative;
    float: right;
    right: .2rem;
    height: .94rem;
    width: 1.4rem;

  }
  .confirm{
    position: relative;
    top: .48rem;
    right: .8rem;
    float: right;
    width: 28%;
    height: .94rem;
    line-height: .94rem;
    text-align: center;
    border-radius: .32rem;
    color: aliceblue;
    font-size: .36rem;
    letter-spacing: .1rem;
    background:rgb(114, 212, 89);
    box-shadow: 0px 1px 3px rgba(20, 17, 17, 0.3);
  }
  .text-confirm{
    position: relative;
    float: right;
    right: .2rem;
    height: .94rem;
    width: 1.4rem;

  }
</style>